<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../pic/icomoon-v1.0/style.css">
    <style>
        * {

            margin: 0;

            padding: 0;

        }

        ul,
        li,
        ol {

            list-style: none;

        }

        .top {
            width: 100vw;
            height: 50px;
            display: flex;
        }

        .top>li {
            width: 50%;
            /* border: 1px solid black; */
            font-size: 18px;
            text-align: center;
            line-height: 50px;

        }

        .top>.top_active {
            color: #ff5f16;
        }

        .all {
            display: none;
        }

        .active {
            display: block;
        }

        .film {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .film {
            width: 100%;
            height: 130px;
            justify-content: space-around;
        }

        .film_photo {
            width: 70px;
            height: 100px;
        }

        .film_photo>img {
            width: 100%;
            height: 100%;
        }

        .film_message>li {
            width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            opacity: 0.7;
        }

        .film_message>li:nth-child(1) {
            font-size: 22px;
            font-weight: 700;
            padding-bottom: 15px;
            opacity: 1;
        }

        .film_message>li:nth-child(1)>span {
            height: 30px;
            width: 32px;
            margin-left: 5px;
            background-color: #ccc;
            display: inline-block;
            border-radius: 4px;
        }

        .buy {
            font-size: 20px;
            font-weight: 700;
            right: 10px;
            top: 233px;
            border: 2px solid #ff4100;
            color: #ff4100;
            padding: 3px 7px;
        }

        #title {
            display: flex;
            flex-direction: row;
            text-align: center;
        }

        #title>div:first-child {
            margin-top: 5px;
            width: 56px;
        }

        #title>div:last-child {
            flex: 1;
            font-size: 22px;
            /* margin-left: -56px; */
            transform: translate(-28px);

        }
    </style>
</head>

<body>
    <div id="title">
        <div id="city" style="border: 1px solid black;"><span>北京</span><i class="icon-xiala2"></i></div>
        <div><span>电影</span></div>
    </div>
    <ul class="top">
        <li class="left top_active">正在热映</li>
        <li class="right">即将上映</li>
    </ul>
    <ul class="all active">
        <!-- <div class="film">
            <div class="film_photo"><img
                    src="https://i1.hdslb.com/bfs/archive/e167aa8455f695026fc1d6b48c8aff3c50cb5322.jpg" alt=""></div>
            <ul class="film_message">
                <li>猩球崛起：新世界<span>2D</span></li>
                <li>主演：韦斯·鲍尔&nbsp;欧文·泰格&nbsp;弗蕾娅·艾伦</li>
                <li>美国|&nbsp;145分钟</li>
            </ul>
            <div class="buy">
                购票
            </div>
        </div> -->
    </ul>
    <ul class="all ">
        <!-- <div class="film">
            <div class="film_photo"><img
                    src="https://i1.hdslb.com/bfs/archive/e167aa8455f695026fc1d6b48c8aff3c50cb5322.jpg" alt=""></div>
            <ul class="film_message">
                <li>猩球崛起：新世界<span>2D</span></li>
                <li>主演：韦斯·鲍尔&nbsp;欧文·泰格&nbsp;弗蕾娅·艾伦</li>
                <li>美国|&nbsp;145分钟</li>
            </ul>
            <div class="buy">
                购买
            </div>
        </div> -->
    </ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    function fn(e, data) {
        window.open(`../maizuo/电影详情.html?data=${data}`)
    }
    let currentpage = 1
    let type = 1
    let _city = localStorage.getItem('city')
    let cityId = JSON.parse(_city)?.cityId || '110100'
    // let cityId = 110100
    console.log(cityId)
    //tab切换
    let all = document.getElementsByClassName('all')
    let left = document.getElementsByClassName('left')[0]
    let right = document.getElementsByClassName('right')[0]

    left.addEventListener('click', function () {
        left.classList.add('top_active');
        right.classList.remove('top_active');
        document.getElementsByClassName('all')[0].classList.add('active')
        document.getElementsByClassName('all')[1].classList.remove('active')
        type = 1
        loadDate(currentpage, type, cityId)
    });
    right.addEventListener('click', function () {
        right.classList.add('top_active');
        left.classList.remove('top_active');
        document.getElementsByClassName('all')[1].classList.add('active')
        document.getElementsByClassName('all')[0].classList.remove('active')
        type = 2
        loadDate(currentpage, type, cityId)
    });
    loadDate(currentpage, type, cityId)


    //热映/即将页面
    function loadDate(currentpage, type, cityId) {
        axios.get(`https://m.maizuo.com/gateway?cityId=${cityId}&pageNum=${currentpage}&pageSize=10&type=${type}`, {
            headers: {
                "X-Host": "mall.film-ticket.film.list"
            }
        }).then(res => {
            let data = res?.data?.data?.films || []
            console.log(data)
            if (!data.length) {
                console.log('没数据了')
                return
            }
            let pic = data.map(item => {
                item.poster = item.poster.replace('pic.maizuo.com', 'static.maizuo.com/pc/v5')
                return item.poster
            })
            let actors = data.map(item => {
                return item.actors?.map(i => i.name).join(' ')
            })
            // console.log(actors)

            // if (data.length > 0) {
            //     currentpage++
            // }

            for (var i = 0; i < data.length; i++) {
                let lis = document.createElement('li')
                lis.innerHTML =
                    `<div class="film" onclick="fn(event,${data[i].filmId})">
                        <div class="film_photo"><img src="${pic[i]}" alt=""></div>
                        <ul class="film_message">
                        <li>${data[i].name}<span>${data[i].filmType.name}</span></li>
                        <li>主演：${actors[i]}</li>
                        <li>${data[i].nation}|&nbsp;${data[i].runtime}分钟</li>
                        </ul>
                    <div class="buy">
                        购票
                    </div>
                    </div> `
                document.getElementsByClassName('all')[type - 1].appendChild(lis)
            }



        })
    }
    function ulsScroll() {
        let content = all[type - 1].offsetHeight
        let ulsTop = all[type - 1].offsetTop
        let client = document.documentElement.clientHeight
        let winScroll = document.documentElement.scrollTop
        console.log(content, ulsTop, client, winScroll)
        if ((content + ulsTop) - Math.round(client + winScroll) < 100) {
            console.log('到底了')
            // 请求
            currentpage++
            loadDate(currentpage, type, cityId)
        }
    }

    //tab切换
    window.onscroll = _.throttle(ulsScroll, 1000)

    city.onclick = function () {
        window.open('./city.html')
    }
</script>

</html>